<template>
	<view class="addqrcode">
		<HeaderBar title="收款" showBack backgroundColor="#F6F6F6" fixed />
		<view class="content">
			<view class="title">
				该地址仅支持{{chainInfo.chainName}}相关资产
			</view>
			<div class="qrbox">
				<QRCode v-if="address" :value="address" :size="300" backgroundColor="#FFF" foregroundColor="#000" />
			</div>
			<view class="addressBox">
				<view class="addTitle">
					接收地址
				</view>
				<view class="address">
					{{address}}
				</view>
			</view>
			<view class="copy">
				<text @tap="copy()">复制</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			chainId() {
				return this.$store.getters.getChainId;
			},
			address() {
				return this.$store.getters.getAddress;
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.addqrcode {
		width: 100%;
		height: 100%;
		background: #F6F6F6;
		font-size: 26upx;

		.content {
			margin: 40upx 30upx;
			background-color: #FFFFFF;
			padding: 40upx 60upx;
			border-radius: 20upx;
			box-shadow: 0 10px 20px rgba(246, 246, 246, 0.2);

			.title {
				color: #E49C37;
				background: #FEF5EE;
				text-align: center;
				padding: 20upx 0;
				border-radius: 20upx;
			}

			.qrbox {
				margin: 100upx auto;
			}

			.addressBox {
				background: #F6F6F6;
				text-align: center;
				padding: 10upx 20upx;
				border-radius: 20upx;
				word-break: break-all;
				font-size: 24upx;

				.addTitle {
					color: #9FA0A2;
					margin-bottom: 10upx;
				}
			}

			.copy {
				text-align: center;
				margin-top: 40upx;
				color: #368321;
			}
		}
	}
</style>